<template>
  <div id="app">
    <choose-user v-if="$root.me == null" :userlist="userlist"></choose-user>
    <userlist :isLogin="isLogin" v-else></userlist>
  </div>
</template>

<script>
import chooseUser from "./components/chooseUser";
import axios from "axios";
import userlist from "./components/userlist";
import socket from "./socket";

export default {
  name: "App",
  components: {
    chooseUser,
    userlist
  },
  data() {
    return {
      userlist: [],
      isLogin: false
    };
  },
  beforeMount() {
    axios.get("http://localhost:8001/api/userlist").then(res => {
      this.userlist = res.data;
    });
  },
  mounted() {
    socket.on("login", res => {
      if (res['state'] == 'ok') {
        this.isLogin = true;
      }
    });
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
